<template>
    <div>
        <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
            <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
            <div>
                <div style="margin: 10px 0">
                    <!--    搜索区-->
                    <div style="margin: 10px 0;display:flex;">

                        <div style="flex:0,1,12%">
                            <span
                                style="margin-left: 15px; margin-right: 14px; font-size: 15px; font-weight: 700;">用户ID</span>
                            <el-input v-model.number="s_userId" size="small" clearable placeholder="请输入id"
                                prefix-icon="el-icon-search" style="width: 60%;" />
                        </div>
                        <div style="flex:0,1,12%">
                            <span
                                style="margin-left: 15px; margin-right: 14px; font-size: 15px; font-weight: 700;">昵称</span>
                            <el-input v-model.number="s_userName" size="small" clearable placeholder="请输入昵称"
                                prefix-icon="el-icon-search" style="width: 60%;" />
                        </div>
      
                        <div style="flex:0,1,10%">
                            <span
                                style="margin-left: 20px; margin-right: 14px; font-size: 15px; font-weight: 700;">状态</span>
                            <el-select v-model="value" size="small" placeholder="请选择" clearable style="width:44%;">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>

                            </el-select>
                        </div>
                        <div style="margin-right: 15px;width: 200px;">
                            <el-button icon="el-icon-search" @click="load"
                                style="background-color: #143371; color: aliceblue;width: 50%;font-size: 12px;"
                                size="mini">搜搜</el-button>
                            <el-button icon="el-icon-refresh-left" style="margin-left: 5px;width: 45%;font-size: 12px;"
                                @click="reset" size="mini">重置</el-button>
                        </div>
                        <div style="float: right">
                            <el-tooltip content="添加模型" placement="top">
                                <el-button style="background-color: #143371; color: aliceblue;" size="small"
                                    @click="add">+新增</el-button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>

                <el-table v-loading="loading" :data="tableData" max-height="1000" style="width: 100%"
                    :row-style="{ height: '32px' }" :cell-style="{ padding: '4px' }" ref="multipleTable"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="#" type="index" />
                    <el-table-column v-if="false" label="用户ID" prop="userId" />
                    <el-table-column label="昵称" prop="username" />
                    <el-table-column label="角色">
                        <template slot-scope="scope">
                            <span>{{ scope.row.role }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="电话" prop="phone" />
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <el-tag v-if="!scope.row.status" type="danger">封禁</el-tag>
                            <el-tag v-else type="primary">正常</el-tag>
                        </template>
                    </el-table-column>
                    <!--      操作栏-->
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status" size="mini" type="danger"
                                @click="handleStatus(scope.$index, scope.row, false)">封禁</el-button>
                            <el-button v-if="!scope.row.status" size="mini" type="primary"
                                @click="handleStatus(scope.$index, scope.row, true)">解禁</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div v-loading="dialogloading">
                    <!--  弹窗-->
                    <el-dialog :visible.sync="dialogVisible" title="操作" width="50%" @close="cancel" top="30px">
                        <div>
                            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                                <el-form-item label="用户姓名" prop="username">
                                    <el-input v-model="form.username" style="width: 80%" placeholder="用户姓名"></el-input>
                                </el-form-item>
                                <el-form-item label="电话" prop="phone">
                                    <el-input v-model="form.phone" style="width: 80%" placeholder="电话"></el-input>
                                </el-form-item>
                                <el-form-item label="角色" prop="role">
                                    <el-input v-model="form.role" style="width: 80%" placeholder="角色"></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="phone">
                                    <el-input v-model="form.password" style="width: 80%" placeholder="密码"></el-input>
                                </el-form-item>
                                <el-form-item label="账号状态" prop="phone">
                                    <el-input v-model="form.status" style="width: 80%" placeholder="账号状态"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                        <template #footer>
                            <span class="dialog-footer" v-if="isDetail == 0">
                                <el-button @click="cancel">取 消</el-button>
                                <el-button type="primary" @click="save">确 定</el-button>
                            </span>
                        </template>
                    </el-dialog>
                </div>
                <div style="margin: 10px 0">
                    <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[6, 10]" :total="total"
                        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
    name: "UserInfo",
    data() {

        return {
            rules: {
                title: [{
                    required: true, message: "请输入标题", trigger: "blur"
                }],
                context: [{
                    required: true, message: "请输入标题", trigger: "blur"
                }],

            },

            form: {
                    userId: 20001002,
                    username: 'zzzjc',
                    role: '普通用户',
                    phone: '12365678910',
                    sex: 1,
                    status: 1
                },
            s_userId: null,
            s_userName: null,
            s_userArea: null,
            s_sex: null,
            selectedToMsgUserId: [],
            options2: [
                {
                    value: 0,
                    label: '女'
                },
                {
                    value: 1,
                    label: '男'
                },

            ],
            options: [
                {
                    value: 0,
                    label: '封禁中'
                },
                {
                    value: 1,
                    label: '正常'
                },

            ],
            multipleSelection: [],
            mutilSeclected: false,
            value: '',
            loading: true,
            editJudge: true,
            judge: false,
            dialogVisible: false,
            search: "",
            currentPage: 1,
            pageSize: 6,
            total: 0,
            CoverdialogVisible: false,
            MoredialogVisible: false,
            tableData: [
                {
                    userId: 20001001,
                    username: 'zjc',
                    phone: '12345678910',
                    sex: 1,
                    role: '管理员',
                    userAvatar: 'https://gzz-project-file.oss-cn-guangzhou.aliyuncs.com/Avatar/e6a3ec72-9c03-4c7d-89ad-98ce5b6f7755.JPG',
                    orderNum: 3,
                    sumPrice: 1000,
                    strategyNum: 2,
                    status: 1
                },
                {
                    userId: 20001002,
                    username: 'zzzjc',
                    role: '普通用户',
                    phone: '12365678910',
                    sex: 1,
                    userAvatar: 'https://gzz-project-file.oss-cn-guangzhou.aliyuncs.com/Avatar/e6a3ec72-9c03-4c7d-89ad-98ce5b6f7755.JPG',
                    orderNum: 5,
                    sumPrice: 1200,
                    strategyNum: 1,
                    status: 1
                }
            ],
            editDisplay: {
                display: "block",
            },
            display: {
                display: "none",
            },
        };
    },
    created() {
        this.load();
        this.loading = true;
        setTimeout(() => {
            //设置延迟执行
            this.loading = false;
        }, 1000);
    },
    methods: {
        handleStatus(index, row, status) {
            // if(!status){
            //   this.$confirm("你确定封禁"+row.userId+"吗？",{
            //   iconClass: "el-icon-question", //自定义图标样式
            //   confirmButtonText: "确认", //确认按钮文字
            //   cancelButtonText: "取消", //取消按钮文字
            //   showClose: true, //是否显示右上角关闭按钮
            //   type: "warning", //提示类型  success/info/warning/error
            // }).then(()=>{
            //   request.get("/user/updateStatus",{
            //     params:{
            //       userId:row.userId,
            //       status:status
            //     }
            //   }).then(res=>{
            //     if(res.code==='1'){
            //       this.tableData[index].status = status
            //     }
            //   })

            // }).catch(()=>{
            //   alert("取消")
            // })
            // }else{
            //   request.get("/user/updateStatus",{
            //     params:{
            //       userId:row.userId,
            //       status:status
            //     }
            //   }).then(res=>{
            //     if(res.code==='1'){
            //       this.tableData[index].status = status
            //     }
            //   })

            // }


        },
        add() {
            this.dialogVisible = true;
            this.isDetail = 0;
            this.judge = false;
            // this.form = {}
        },
        async load() {
            this.total = this.tableData.length;

        },
        reset() {
            this.value = null
            this.s_userId = null
            this.s_userName = null
            this.s_userArea = null
            this.s_sex = null
            this.load()
        },

        handleMsg(index, row) {
            this.dialogVisible = true;
            this.selectedToMsgUserId = []
            this.selectedToMsgUserId.push(row.userId)
            console.log(this.selectedToMsgUserId)
        },
        handleMsg2() {
            this.dialogVisible = true;
            this.selectedToMsgUserId = []
            this.multipleSelection.forEach(row => {
                this.selectedToMsgUserId.push(row.userId)
            })
            console.log(this.selectedToMsgUserId)

        },
        cancel() {
            this.$refs.form.resetFields();
            this.dialogVisible = false;
            this.selectedToMsgUserId = null
        },
        handleSizeChange(pageSize) {
            //改变每页个数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(pageNum) {
            //改变页码
            this.currentPage = pageNum;
            this.load();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
            if (this.multipleSelection.length > 0) {
                console.log(true)
                this.mutilSeclected = true
            } else {
                console.log(false)
                this.mutilSeclected = false
            }
        },
        save() {
            // 发送请求新增用户
        }
    }


}
</script>
<style>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 80%;
    display: block;
}
</style>